<template>
  <i :class="['iconfont', 'otherStyle', 'icon-' + name]" 
  :style="{ 
  color, 
  fontSize: size, 
  width: Number(size.substring(0, size.length - 3))+0.9+'rem',  
  height: Number(size.substring(0, size.length - 3))+0.9+'rem', backgroundColor: bgColor, borderRadius: radius, flexShrink: 0 }"></i>
</template>

<script lang='ts' setup>
interface IMIconProps {
  name: string, 
  color?: string,
  size?: string
  bgColor?: string
  radius?: string
}

const props = withDefaults(defineProps<IMIconProps>(), {
  color: '#000',
  size: '2rem',
  bgColor: 'none',
  radius: '0px'
})
</script>

<style scoped lang='scss'>
.otherStyle{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>